<!DOCTYPE html>
<html>
<head>
	<title>hello world</title>
</head>
<body>
	<div id='app'></div>
	<div id='app1'>{{message}}</div> 
	<!-- 
		需求:在div里面写入hello world , 2秒钟后hello world 内容改变
	 -->

	 <script type="text/javascript" src="../../vue.js"></script>
	 <script type="text/javascript">
	 	//方式一 : 操作 dom
	 	/*var app = document.getElementById('app');
	 	app.innerHTML = 'hello world';

	 	setTimeout(function(){
	 		app.innerHTML = 'change world'
	 	},2000);*/

	 	//方式二 : 使用vue,引入vue.js
	 	/**
	 	 * el data  都是固定写法,写错则语法错误;
	 	 * 使用vue后就不用再去操作dom,只需要关心数据本身
	 	 */
	 	var obj = new Vue({
	 		el : '#app1',
	 		data : {
	 			message : 'hello Vue'
	 		}
	 	});

	 	setTimeout(function(){
	 		//就好比取一个对象里的属性一层一层取到后赋值
	 		obj.$data.message = 'change world'
	 	},2000);
	 </script>


</body>
</html>